<template>
	<div class="register">
		<Header title="注册页面" />
		<div class="img">电影</div>
		<van-form @submit="onSubmit">
			<van-field
				v-model="username"
				name="用户名"
				label="用户名"
				placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]"
			/>
			<van-field
				v-model="password"
				type="password"
				name="密码"
				label="密码"
				placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]"
			/>
			<div style="margin: 16px">
				<van-button
					round
					block
					type="info"
					native-type="submit"
					color="#ffc400"
				>
					注册
				</van-button>
				<van-button
					round
					block
					type="info"
					color="#ffc400"
					class="register"
					@click="this.$router.push('./login')"
				>
					已有账号去登录
				</van-button>
			</div>
		</van-form>
	</div>
</template>

<script>
import Header from '../../components/common/Header.vue'
import { Toast } from 'vant'
export default {
	components: { Header },
	data() {
		return {
			username: '',
			password: '',
		}
	},

	methods: {
		// 注册
		register(value) {
			Toast('注册成功')
			localStorage.setItem('userInfo', JSON.stringify(value))
			this.$router.push('./login')
		},
		// 提交按钮
		onSubmit(value) {
			if (localStorage.userInfo) {
				let userInfo = JSON.parse(localStorage.userInfo)
				if (userInfo['用户名'] === value['用户名']) {
					Toast('该账号已存在')
					return
				} else {
					this.register(value)
				}
			} else {
				this.register(value)
			}
		},
	},
}
</script>
<style lang="less" scoped>
.register {
	.img {
		width: 200px;
		height: 200px;
		background-color: #ffc400;
		font-size: 80px;
		line-height: 200px;
		text-align: center;
		border-radius: 40px;
		margin: 20px auto;
	}
	.register {
		margin-top: 20px;
	}
}
</style>
